<style lang="scss">
@import "../uv.scss";
</style>
<template>
  <div class="p1756452081 pb30 mt30  pt30" :class="'pickup_address-' + serviceStatus">
    <div class="fac pl30 pr30 jcsb">
      <div class="fac" style=" display: flex;flex-wrap: wrap;">
        <div class="p1756449733   fz26" :style="{color: typeForm[form.type]['color'], background: typeForm[form.type]['bgColor']}" style="display: inline-block;">{{typeForm[form.type]?.text}}</div>
        <slot name="time"></slot>
      </div>
      <div v-if="serviceStatus != 5" style="font-weight: 700;color: #E60012;">
        <div class="fz30" style="display: inline;">¥</div>
        <div class="fz40" style="display: inline;">{{form.order_price}}</div>
      </div>
    </div>
    <div @click="openDesc" class="f pt20 pb20 pl30 pr30" style="width: 100%;box-sizing: border-box;">
      <u-line v-if="clientHeight > 0 || serviceStatus == 4 || serviceStatus == 5" :deliveryType="2" :serviceStatus="serviceStatus" :clientHeight="clientHeight"></u-line>
      <div v-show="form.id" class="pl30 p1756530647" style="flex: 1;width: 100%;box-sizing: border-box;">
        <div class="fac jcsb" style="width: 100%;box-sizing: border-box;">
          <div class="fz34">
            <div class="" style="display: inline;">{{form.delivery_address_storey}}</div>
            <div v-if="form.delivery_address_house_number" class="fz32" style="display: inline;font-weight: 400;">
              ({{form.delivery_address_house_number}})</div>
          </div>
          <div v-if="form.is_report_location == 0 || serviceStatus == 3" @click.stop="openMap({ latitude: form._d.lat, longitude: form._d.lng, name: form._d.storey + ' ' + (form._d.number || ''), address: form._d.address   })" class=" f" style="justify-content: flex-end;width: 50rpx;">
            <div class="p1757471683"></div>
          </div>
        </div>
        <div v-if="serviceStatus != 4 && serviceStatus != 5" ref="address" id="petCareOrderAddress" class="fz30 pt10 p1756455733" style="color: #595757;">{{form.delivery_address_address}}</div>
      </div>
    </div>
    <div class="fz30 pl30 " style="color: #9FA0A0;" v-if="serviceStatus == 4 || serviceStatus == 5">
      订单编号：{{form.order_no}}</div>
    <div v-if="serviceStatus != 4 && serviceStatus != 5" class="f pl30 pt10 pr30" style="width: 100%;box-sizing: border-box;">
      <div class="p1756456030">
        <uv-icon name="chat-fill" color="#333" size="45rpx"></uv-icon>
        <div style="color: #3E3A39;" class="fz28">在线会话</div>
      </div>
      <div class="p1756456538">
        <uv-line direction="col" color="#B5B5B6"></uv-line>
      </div>
      <div class="p1756456030">
        <uv-icon name="phone-fill" color="#333" size="45rpx"></uv-icon>
        <div style="color: #3E3A39;" class="fz28">联系</div>
      </div>
      <slot name="button"></slot>
    </div>

  </div>
</template>
<script>
import lineVue from './line.vue'
import dataJsonMixin from '../mixin/dataJson.js'
export default {
  components: {
    'u-line': lineVue,
  },
  props: {
    serviceStatus: {
      type: Number,
      default: 0
    },
    deliveryType: {
      type: Number,
      default: 2
    },
    form: {
      type: Object,
      default: {}
    },
  },
  mixins: [dataJsonMixin],
  data() {
    return {
      list: [],
      clientHeight: 0,
      timer: null
    }
  },
  mounted() {
    this.lineHeightFun()
  },
  methods: {
    openMap(data) {
      let { latitude, longitude, name,  address} = data
      
   
      uni.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        name: name || '',
        address: address || '',
      })
    },
    lineHeightFun() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          if (this.$refs.address && this.$refs.address.clientHeight) {
            this.clientHeight = this.$refs.address.clientHeight
            clearInterval(this.timer)
          } else {
            uni.createSelectorQuery().in(this).select("#petCareOrderAddress").boundingClientRect((data) => {
              if (data) {
                this.clientHeight = 0
                this.clientHeight = data.height
              }
            }).exec();
          }
        }, 50)
        this.setTimeoutFun(50)
        setTimeout(() => {
          clearInterval(this.timer)
          this.setTimeoutFun(0)
        }, 3000)
      })

    },
    setTimeoutFun(t) {
      setTimeout(() => {
        if (this.$refs.address && this.$refs.address.clientHeight && this.$refs.address.clientHeight != this.clientHeight) {
          this.clientHeight = 0
          this.clientHeight = this.$refs.address.clientHeight
        } else {
          uni.createSelectorQuery().in(this).select("#petCareOrderAddress").boundingClientRect((data) => {
            if (data) {
              this.clientHeight = 0
              this.clientHeight = data.height
            }
          }).exec();
        }
      }, t)
    },
    openDesc() {
      if (this.serviceStatus == 0) return
      uni.navigateTo({
        url: '/pages-neighbor/orderDesc?id=' + this.form.id
      });
    },
    previewImageTap(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current,
        fail() {
          this.$uv.toast('预览图片失败')
        },
      });
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../common.scss";
.p1756452081 {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  margin-top: 30rpx;
  overflow: hidden;
}

.p1756449733 {
  font-weight: 500;
  color: #9333ea;
  background-color: #f3e8ff;
  width: 130rpx;
  height: 45rpx;
  min-height: 45rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 45rpx;
  margin-right: 10rpx;
}

.p1756450135 {
  width: 130rpx;
  max-width: 130rpx;
  margin-right: 30rpx;
  line-height: 1;
}

.p1756451654 {
  background: #f7f8f8;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  width: calc(100% - 130rpx);
  box-sizing: border-box;
  margin-right: 30rpx;
  line-height: 1.3;
}

.p1756450619 {
  width: calc(100% - 20rpx);
  height: 100%;
  max-height: 160rpx;
}

.pr15 {
  padding-right: 10rpx;
}

.p1756455733 {
  width: 90%;
}

.p1756456030 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 80rpx;
}

.p1756456538 {
  height: 40rpx;
  margin-left: 20rpx;
}

.p1756530647 {
  font-weight: 700;
}

.p1756455733 {
  font-weight: normal;
}

.pickup_address-4 {
  .p1756530647 {
    font-weight: normal !important;
  }
}

.pickup_address-5 {
  .p1756530647 {
    font-weight: normal !important;
    color: #9fa0a0 !important;
  }
}
</style>